<template>
    <li>
        <label>
          <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
          <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'my-item',
		//声明接受插值语法
		props:['todo'],
		methods:{
			handleCheck(id){
				//通知app修改对应对象的done值
				this.$bus.$emit('checkTodo',id)
			},
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知app删除
					this.$bus.$emit('deleteTodo',id)
				}
			}
		}
    }
</script>

<style scoped>
    /*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}
	
	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}

	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>